<template>
	<view>
		<!-- 页首 -->
		<!-- <zw-header></zw-header> -->
		<menu-wrapper active-index="2-1" style="background-color: #fff;padding: 0;">
			<view class="card-body">
				<view>
					<image src="/static/image/publish/keft.png" class="image" @click="prev"></image>
				</view>
				<view class="container">
					<view style="width: 65%;">
						<view style="display: flex;justify-content: center;align-items: center;" v-if="returnData">
							<image :src="returnData.finalResultImages?returnData.finalResultImages[0]:''"
								style="border-radius: 14px;width: 800rpx;" mode="widthFix">
							</image>
						</view>
					</view>
					<view style="width: 35%;height: 90%;position: relative;">
						<view style="max-width: 900rpx;" v-if="returnData.fullTextCmd">
							<view class="left-card">
								<view style="display: flex;justify-content: space-between;align-items: center;">
									<view style="display: flex;justify-content: flex-start;align-items: center;">
										<image style="width: 35rpx;" mode="widthFix"
											src="/static/image/workes/czzl.png">
										</image>
										<view style="color: #fff;font-size: 32rpx;font-weight: 500;margin-left: 16rpx;">
											创作指令
										</view>
									</view>
									<view
										style="display: flex;justify-content: flex-start;align-items: center;cursor: pointer;"
										@click="copyText(returnData.fullTextCmd)">

										<view
											style="color: #fff;font-size: 30rpx;font-weight: 500;margin-right: 10rpx;">
											复制
										</view>
										<image style="width: 24rpx;" mode="widthFix" src="/static/image/workes/fz.png">
										</image>
									</view>
								</view>
								<view
									style="border-bottom: 1px solid #FFFFFF;margin-top: 30rpx;margin-bottom: 30rpx;opacity: 0.6;">
								</view>
								<view style="color: #fff;font-size: 30rpx;font-weight: 500;">
									{{returnData.fullTextCmd}}
								</view>
							</view>
						</view>

						<view style="max-width: 900rpx;margin-top: 40rpx;" v-if="returnData.badContentFullText">
							<view class="left-card">
								<view style="display: flex;justify-content: space-between;align-items: center;">
									<view style="display: flex;justify-content: flex-start;align-items: center;">
										<image style="width: 35rpx;" mode="widthFix"
											src="/static/image/workes/fxzl.png">
										</image>
										<view style="color: #fff;font-size: 32rpx;font-weight: 500;margin-left: 16rpx;">
											反向词指令
										</view>
									</view>
									<view
										style="display: flex;justify-content: flex-start;align-items: center;cursor: pointer;"
										@click="copyText(returnData.badContentFullText)">

										<view
											style="color: #fff;font-size: 30rpx;font-weight: 500;margin-right: 10rpx;">
											复制
										</view>
										<image style="width: 24rpx;" mode="widthFix" src="/static/image/workes/fz.png">
										</image>
									</view>
								</view>
								<view
									style="border-bottom: 1px solid #FFFFFF;margin-top: 30rpx;margin-bottom: 30rpx;opacity: 0.6;">
								</view>
								<view style="color: #fff;font-size: 30rpx;font-weight: 500;">
									{{returnData.badContentFullText}}
								</view>
							</view>
						</view>
						<view style="max-width: 900rpx;margin-top: 40rpx;">
							<view class="left-card">
								<view style="display: flex;justify-content: space-between;align-items: center;">
									<view style="display: flex;justify-content: flex-start;align-items: center;">
										<image style="width: 35rpx;" mode="widthFix"
											src="/static/image/workes/czxx.png">
										</image>
										<view style="color: #fff;font-size: 32rpx;font-weight: 500;margin-left: 16rpx;">
											创作信息
										</view>
									</view>
								</view>
								<view
									style="border-bottom: 1px solid #FFFFFF;margin-top: 30rpx;margin-bottom: 30rpx;opacity: 0.6;">
								</view>
								<view style="color: #fff;font-size: 30rpx;font-weight: 500;">
									<view style="display: flex;justify-content: space-between;align-items: center;">
										<view>创作者</view>
										<view>{{loginUser.name}}</view>
									</view>
									<view
										style="display: flex;justify-content: space-between;align-items: center;margin-top: 30rpx;">
										<view>创建时间</view>
										<view>{{returnData.createTime}}</view>
									</view>
									<view
										style="display: flex;justify-content: space-between;align-items: center;margin-top: 30rpx;">
										<view>画面尺寸</view>
										<view>{{sizeArray[returnData.width2height]}}</view>
									</view>
									<view
										style="display: flex;justify-content: space-between;align-items: center;margin-top: 30rpx;">
										<view>Seed(种子)</view>
										<view>无</view>
									</view>
									<view
										style="display: flex;justify-content: space-between;align-items: center;margin-top: 30rpx;">
										<view>所属合集</view>
										<view>查看</view>
									</view>
									<view
										style="display: flex;justify-content: space-between;align-items: center;margin-top: 30rpx;">
										<view>图片提示</view>
										<view>无</view>
									</view>
								</view>
							</view>
						</view>

						<view style="max-width: 900rpx;margin-top: 40rpx;position: absolute;bottom: 0;width: 100%;" >
							<view class="left-card" style="background: #000000;">
								<view style="display: flex;justify-content: space-between;align-items: center;">
									<view style="display: flex;align-items: center;flex-direction: column;cursor: pointer;">
										<image style="width: 30rpx;" mode="widthFix"
											src="/static/image/workes/zcsc.png">
										</image>
										<view style="color: #B2B4BB;font-size: 28rpx;font-weight: 500;margin-top: 10rpx;">
											再次生成
										</view>
									</view>
									<view style="display: flex;align-items: center;flex-direction: column;cursor: pointer;">
										<image style="width: 30rpx;" mode="widthFix"
											src="/static/image/workes/fsz.png">
										</image>
										<view style="color: #B2B4BB;font-size: 28rpx;font-weight: 500;margin-top: 10rpx;">
											发送至
										</view>
									</view>
									<view style="display: flex;align-items: center;flex-direction: column;cursor: pointer;">
										<image style="width: 30rpx;" mode="widthFix"
											src="/static/image/workes/xz.png">
										</image>
										<view style="color: #B2B4BB;font-size: 28rpx;font-weight: 500;margin-top: 10rpx;">
											下载
										</view>
									</view>
									<view style="display: flex;align-items: center;flex-direction: column;cursor: pointer;" @click="publish()">
										<image style="width: 30rpx;" mode="widthFix"
											src="/static/image/workes/fb.png">
										</image>
										<view style="color: #B2B4BB;font-size: 28rpx;font-weight: 500;margin-top: 10rpx;">
											发布
										</view>
									</view>
									<view style="display: flex;align-items: center;flex-direction: column;cursor: pointer;" @click="deletePost()">
										<image style="width: 30rpx;" mode="widthFix"
											src="/static/image/workes/sc.png">
										</image>
										<view style="color: #B2B4BB;font-size: 28rpx;font-weight: 500;margin-top: 10rpx;">
											删除
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view
					style="position: relative;height: 1600rpx;display: flex;justify-content: center;align-items: center;">
					<view>
						<image src="/static/image/publish/close.png" class="image"
							style="position: absolute;top: 0;right: 0;" @click="close"></image>
						<image src="/static/image/publish/rigth.png" class="image" @click="next"></image>
					</view>
				</view>
			</view>
		</menu-wrapper>
		<fui-landscape :show="showImg" :closable="closable" @close="closePopup">
			<view class="fui-ani__box" style="background-color: #fff;border-radius: 28rpx;width: 1400rpx;;">
				<view class="flex-center"
					style="height:120rpx;display: flex;justify-content: space-between;align-items: center;padding: 0 40rpx 0 40rpx;">
					<view style="color: #000000;font-weight: bold;font-size: 48rpx;">添加作品图</view>
					<image src="/static/image/user/content/close.png" style="width:80rpx;" mode="widthFix"
						@click="closePopup">
					</image>
				</view>
				<view style="margin:80rpx;width: 90%;padding-top: 0;">
					<view
						style="display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #D8D8D8;">

					</view>
					<view style="display: flex;justify-content: center;align-items: center;margin-top: 50rpx;">
						<view @click="addImg"
							style="font-size: 18px;font-weight: bold;color: #FFFFFF;background: #0033FF;border-radius: 100px;height: 100rpx;width: 100%;display: flex;justify-content: center;align-items: center;cursor: pointer;">
							<view>确认添加</view>
						</view>
					</view>
				</view>
			</view>
		</fui-landscape>
	</view>
</template>

<script>
	import menuWrapper from '@/components/user/common/menu-wrapper.vue';
	import centerConfig from '@/common/config/user/center.config.js';

	import {
		mapState
	} from 'vuex';

	export default {
		components: {
			menuWrapper
		},
		data() {
			return {
				sizeArray: [
					"",
					"1:1",
					"1:2",
					"4:3",
					"3:4",
					"16:9",
					"9:16"
				],
				moduleArray: [
					"1:1",
					"1:1",
					"1:2",
					"1:2",
					"精彩",
					"细腻",
					"动漫",
					"创意",
					"照片"
				],
				styleArray: [
					"长焦镜头",
					"长焦镜头",
					"手绘背景",
					"CG数字渲染",
					"哑光颜",
					"X光片",
					"矢量设计海报",
					"极简线条画",
					"炭笔画",
					"更多"
				],
				showImg: false,
				closable: false,
				type: 0,
				doing: true,
				showDo: false,
				nextDo: false,
				dofinish: false,
				percent: 0,
				imageList: [],
				timer: null,
				sizeTab1Index: 1,
				sizeTab2Index: 1,
				styleIndex: 1,
				moduleIndex: 1,
				goodContent: "",
				badContent: "",
				createTime: "",
				author: "",
				module: "",
				size: "",
				style: "",
				returnData: null,
				plateUserId: "",
				id: 0,
			}
		},
		computed: {
			...mapState(['loginUser']),
			currentTime() {
				const currentHour = new Date().getHours();
				const timeQuantums = ['凌晨', '上午', '下午', '晚上'];
				return timeQuantums[Math.floor(currentHour / 6)];
			}
		},
		onLoad(op) {
			this.id = op.id;
			this.getInfo();
			this.$store.commit('tab', 0);
		},
		onReachBottom() {
			console.log('下拉加载')
		},
		methods: {
			deletePost() {
				this.$util.request('/api/v1/pictureCollection/delete/'+this.id, {}, (res) => {
					console.log('pictureCollection', res.data)
					uni.navigateBack()
				}, true);
			},
			publish() {
				uni.setStorage({
					data:[this.returnData.finalResultImages[0]],
					key:'picture'
				})
				this.goUrl('/pages/publish/picture')
			},
			copyText(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						console.log('success');
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				});
			},
			getInfo() {
				const that = this;
				this.$util.request("/api/v1/job/" + this.id, {}, (res) => {
					console.log('返回正确回调', res)
					var array = res.data.finalResultImages;
					if (array == undefined || array.length == 0) {
						setTimeout(function() {
							that.queryData()
						}, 10000);
					} else {
						that.plateUserId = res.data.plateUserId
						that.returnData = res.data;

						for (var i = 0; i < array.length && i < 4; i++) {
							that.imageList.push(array[i])
						}
						if (res.data.taskType == 1 || res.data.taskType == 3 || res.data.taskType == 4) {
							that.showDo = true
						} else {
							that.showDo = false
						}
						console.log('!that.nextDo&&that.type==1')
						console.log(!that.nextDo && that.type == 1)
						console.log('!that.nextDo')
						console.log(!that.nextDo)
						console.log('that.type')
						console.log(that.type)
						that.type = 1;
						that.dofinish = true;
						if (that.timer != undefined) {
							clearInterval(that.timer)
							that.timer = null;
						}
					}
				}, true);

			},
			addImg() {
				for (var i = 0; i < this.vals.length; i++) {
					this.imageList1.push(this.vals[i])
				}
				this.showImg = false;

			},
			closePopup() {
				this.showImg = false
			},
			changeOriginFun(e) {
				this.originFun = e.detail.value;
				if (this.originFun) {
					this.status = 2;
				} else {
					this.status = 1;
				}
				console.log(e.detail)
			},
			submit() {
				if (this.category) {
					this.label = this.category.id
				}
				const that = this;
				this.$util.request('/api/v1/pictureCollection', {
					name: this.name,
					content: this.content,
					status: that.status,
					label: this.label,
					formatImages: this.imageList1,
					type: 1,
					visible: this.visible,
					jobId: this.id,
				}, (res) => {
					uni.showToast({
						title: "发表成功",
						icon: 'none'
					})
					uni.navigateTo({
						url: "/pages/index"
					})
					console.log('返回正确回调', res)
				}, false);


			},
			change(e) {
				this.show = false
				console.log(e)
			},
			cancel() {
				this.show = false
			},
			prev() {
				if (this.index > 0) {
					this.index--
				}
			},
			next() {
				if (this.index < (this.imageList1.length - 1)) {
					this.index++
				}
			},
			close() {
				uni.navigateBack()
			},
			change(e) {
				console.log(e)
			},
			goUrl(url) {
				uni.navigateTo({
					url: url,
					fail(err) {
						console.log(err)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.left-card {
		background: linear-gradient(126deg, rgba(255, 255, 255, 0.5) 4%, rgba(255, 255, 255, 0.2) 104%);
		border: 1px solid;
		border-image: linear-gradient(62deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%);
		backdrop-filter: blur(25px);
		border-radius: 26rpx;
		height: 100%;
		width: 95%;
		padding: 30rpx 45rpx;
	}

	.bottom-button {
		color: #000000;
		background: #D8D8D8;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0 20rpx 0;
		width: 90%;
		margin: 20rpx;
		cursor: pointer;
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
		height: 70rpx;
	}

	.bg-item {
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.select-bg {
		background-color: #3E3E3E;
		border-radius: 16rpx;
		color: #979797;
		font-size: 36rpx;
		font-weight: 500;
		width: 65%;

	}

	.addimg {
		background-color: #3E3E3E;
		border-radius: 24rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}

	.image {
		width: 100rpx;
		height: 100rpx;
	}

	.container {
		width: 70%;
		background: linear-gradient(122deg, #310BE8 0%, #0027FE 34%, #8200FF 65%, #D703FF 99%);
		border-radius: 40rpx;
		height: 1600rpx;
		margin: 0 40rpx 0 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.card-body {
		margin-top: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.lable {
		font-family: Source Han Sans;
		font-size: 80rpx;
		font-weight: bold;
		font-feature-settings: "kern" on;
		color: #3D3D3D;

	}

	.publish {
		background: #A5A5A5;
		border-radius: 50px;
		color: #FFFFFF;
		font-size: 14px;
		padding: 10rpx 20rpx 10rpx 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>